<template>
    <div>
        <div class="bodybox">
            <div id="lmn3">
                <div class="livebigbox" style="background: none;">
                    <div class="mods wp">
                        <div class="mod_top_nav">
                            <h2>最新公文</h2>
                            <el-checkbox @change="getToday"
                                         style="color: #3b8efa;font-weight: bolder;" :true-label="1" :false-label="2">
                            <span style="font-size: 16px">只看今日更新
                              <span class="today-updated">今日已更新
                                <span style="color: red;font-weight:500">{{ todayCount }}</span>
                                份精品资料，每天都有新内容</span>
                            </span>
                            </el-checkbox>

                            <div class="right_nav pts15">
                                <cite>/</cite>
                                <router-link target="_blank" tag="a" to="/list/38"><i></i> 查看更多</router-link>
                                <cite>/</cite>
                            </div>
                            <div class="top_nav_breadcrumb"></div>
                        </div>

                        <div class="mod_list keke_doc_clearfix">
                            <li v-for="(item,index) in topRecords">
                                <span>{{ item.human_time }}</span>
                                <i class="far fa-file-word top-records"></i>
                                <router-link :title="item.title" target="_blank" tag="a" :to="'/detail/'+item.id">
                                    {{ item.title }}
                                </router-link>
                            </li>

                            <li v-for="(item,index) in records">
                                <span>{{ item.human_time }}</span>
                                <i :style="'color:'+$utils.getIconColor(item.type)"
                                   :class="'far '+$utils.getIcon(item.type)+' records '"></i>
                                <router-link :title="item.title" target="_blank" tag="a" :to="'/detail/'+item.id">
                                    {{ item.title }}
                                </router-link>
                            </li>


                        </div>
                    </div>
                </div>

            </div>
            <div class="wp" style="margin-top:30px;">
                <router-link class="actives" to="/"><img src="/static/picture/bar1.jpg"></router-link>
            </div>
        </div>
    </div>
</template>


<script >
//import {mapGetters,mapState} from "vuex";
    export default {
        name:'WordPart',
        props:{
            limitTodayRecords:{
                type:Array,
                required:true,
                default:()=>{return []}
            },
            allTodayRecords:{
                type:Array,
                required:true,
                default:()=>{ return []}
            },
            topRecords:{
                type:Array,
                required:true,
                default:()=>{ return []}
            },
            todayCount:{
                type:Number,
                required:true,
                default:0
            }
        },
        data(){
            return{
                records:[],
            }
        },
        methods:{
            getToday(val){
                if(val===1){
                    this.records = this.allTodayRecords
                }else{
                    this.records = this.limitTodayRecords
                }
            }
        },
        watch:{
            limitTodayRecords(newVal,oldVal){
                this.records =  newVal
            },
        }
        /*computed: {
            //homeData获取的是首页固定的数据，一般只获取一次即可 eg:热词，topRecords，分类  这样的数据
            ...mapGetters(["homeData"]),
        },

        //因为computed的执行晚于mounted，所有在mounted取不到homeData，但是可以用监听的方式获取
        watch:{
            //监听对象里某个属性的变化wfwefedq
            "homeData.allTodayRecords"(newVal,oldVal){
                this.allTodayRecords = newVal
            },
            "homeData.limitTodayRecords"(newVal,oldVal){
                this.records = this.limitTodayRecords = newVal
            },
        }*/
    }
</script>



<style scoped>
    .today-updated{
        color: black;
        font-size: 15px;
        margin-left: 10px;
        font-weight:500;
    }
    .top-records{
        font-size:16px;
        width: 20px;
        height: 22px;
        color:orange
    }
    .records{
        font-size:16px;width: 20px;height: 22px;
    }
</style>
